<script setup>
import { ref } from "vue";
import Taro, { useReady, useLoad } from '@tarojs/taro';
import request from "../../utils/request";
import NavHeader from "../../components/NavHeader.vue";

const statusBar = Taro.getSystemInfoSync();

const detailObj = ref({
  materials:[],
  buyShopName:"",
  buyTime:"",
  expireTime:"",
  status:"",
  packageName:""
})
const packageId = ref(null);
const loading = ref(true)
const getList = async () => {
  await Taro.showLoading({
    mask:true
  })
  const result = await request.get("/app-api/databoard/member-packages/details",{
    packageId:packageId.value
  })
  detailObj.value = result;
  console.log(result)
  Taro.hideLoading();
}
useLoad((options) => {
  packageId.value = options.packageId;
  getList();
})
useReady(() => {
  // setTimeout(() => {
    loading.value = false;
  // },500)
})
</script>

<template>
<view>
  <NavHeader title="详情"></NavHeader>
  <view v-show="loading" class="card">
    <view>
      <nut-skeleton :width="`${statusBar.screenWidth - 50}px`" row="3" animated></nut-skeleton>
    </view>
    <view style="margin-top: 100rpx;">
      <nut-skeleton :width="`${statusBar.screenWidth - 50}px`" row="3" animated></nut-skeleton>
    </view>
  </view>
  <view v-show="!loading">
    <view class="rect">VIP会员</view>
<!--    <view class="rect">{{ detailObj.packageName }}</view>-->
    <view class="box">
      <nut-row type="flex" justify="space-between">
        <nut-col :span="4">
          <view class="title">权益名称</view>
        </nut-col>
        <nut-col :span="4">
          <view class="title">合计次数</view>
        </nut-col>
        <nut-col :span="4">
          <view class="title">消费次数</view>
        </nut-col>
        <nut-col :span="4">
          <view class="title">剩余次数</view>
        </nut-col>
        <nut-col :span="4">
          <view class="title">消费门店</view>
        </nut-col>
        <nut-col :span="4">
          <view class="title">消费时间</view>
        </nut-col>
      </nut-row>
      <nut-row class="box-row"
               v-for="item in detailObj.materials"
               type="flex"
               align="center"
               justify="space-between">
<!--        <nut-col :span="4">-->
<!--          {{ item.materialName }}-->
<!--        </nut-col>-->
        <nut-col :span="4">
          至尊卡
        </nut-col>
        <nut-col :span="4">
          {{item.total}}
        </nut-col>
        <nut-col :span="4">
          {{item.consume}}
        </nut-col>
        <nut-col :span="4">
          {{item.remain}}
        </nut-col>
        <nut-col :span="4">
          {{item.consumeShopName}}
        </nut-col>
        <nut-col :span="4">
          {{item.consumeTime}}
        </nut-col>
      </nut-row>
    </view>
    <view class="box">
      <view class="time">过期时间：{{ detailObj.expireTime }}</view>
      <view class="time">购买门店：{{ detailObj.buyShopName }}</view>
      <view class="time">购买时间：{{ detailObj.buyTime }}</view>
    </view>
  </view>
</view>
</template>

<style>
.box>.time{
  font-size: 26rpx;
  color: #333;
}
.box>.time+.time{
  margin-top: 20rpx;
}
.box-row{
  margin-top: 20rpx;
  color:#979797;
  text-align: center;
  font-size: 24rpx;
}
.title{
  font-size: 26rpx;
  color: #333;
}
.box{
  margin:0 20rpx 20rpx;
  background-color: #F4F4F4;
  border-radius: 20rpx;
  border: 2rpx solid #EEEEEE;
  padding: 18rpx;
}
</style>